---
title: 'Expo Modules API: Get started'
sidebar_title: Get started
description: Learn about getting started with Expo modules API.
---

import { Grid01Icon } from '@expo/styleguide-icons/outline/Grid01Icon';

import { BoxLink } from '~/ui/components/BoxLink';
import { FileTree } from '~/ui/components/FileTree';
import { Terminal } from '~/ui/components/Snippet';
import { Step } from '~/ui/components/Step';

**There are two ways to get started with the Expo Modules API:** you can either initialize a new module from scratch or add the Expo Modules API to an existing module. This guide will walk you through creating a new module from scratch, and the [Integrating in an existing library](/modules/existing-library) covers the latter.

The two recommended flows to create a new module with Expo Modules API:

- [Add a new module to an existing Expo application](#add-a-new-module-to-an-existing-application), and use it to test and develop your module.

- [Create a new module in isolation with a generated example project](#create-a-new-module-with-an-example-project) if you want to reuse it in multiple projects or publish it to npm.

Both of these flows are covered in the next sections.

## Add a new module to an existing application

<Step label="1">

### Create the local Expo module

Navigate to your project directory (the one that contains the **package.json** file) and run the following command. This is the recommended way to create a local Expo module.

<Terminal cmd={['$ npx create-expo-module@latest --local']} />

You can provide a meaningful module name in the CLI prompt. For the rest of the prompts, you can also accept the default suggestions.

Once you've run the command, you will see a new directory created in your project called **modules**. The directory structure should look like this:

<FileTree
  files={[
    ['modules/my-module'],
    ['modules/my-module/android/'],
    ['modules/my-module/ios/'],
    ['modules/my-module/src/'],
    ['modules/my-module/expo-module.config.json'],
    ['modules/my-module/index.ts'],
  ]}
/>

Then, if your project doesn't have native projects generated (**android** and **ios** directories), run the following command, otherwise skip this command:

<Terminal cmd={['$ npx expo prebuild --clean']} />

> **Note**: If you have a pre-existing **ios** directory in your project's root which was created using `npx expo prebuild`, you must reinstall the pods:
>
> <br />
> <Terminal cmd={['$ npx pod-install']} />

</Step>

<Step label="2">

### Use the local module

Import the local module in your application, for example in **App.js** or **App.tsx** or **app/(tabs)/index.tsx**:

```tsx app/(tabs)/index.tsx
/* @hide ...*/ /* @end */
import MyModule from '@/modules/my-module';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      /* @info In the component, return the result of the native method. */
      <Text>{MyModule.hello()}</Text>
      /* @end */
    </View>
  );
}
```

Start the development server in your terminal so that when you edit the native module and build the app in the next step, the changes will be reflected in the app:

<Terminal cmd={['$ npx expo start']} />

Congratulations! You have created a local Expo module. You can now start working on it.

> **info** **Tip**: You can also use absolute import paths [by applying these configuration changes](https://expo.fyi/absolute-path-expo-modules.md).

</Step>

<Step label="3">

### Edit the module

To develop and test your module locally, let's use Android Studio and Xcode for Android and iOS.

#### Android

1. Open the **android** directory (that is generated by `npx expo prebuild` in step 1) from your project in Android Studio. It may take a while for Gradle to finish syncing the native directory project.
2. Once the project is synced, open **modules/my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt** file.
3. Change `hello` function to return a different string, such as "Hello world! 🌎🤖" and save the file.
4. Build the app by clicking **Run 'app'** button from top menu bar and you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

#### iOS

1. Open the **ios** directory (that is generated by `npx expo prebuild` in step 1) from your project in Xcode by running `xed ios` command.
2. Under **Pods** > **Development Pods** > **MyModule**, open **MyModule.swift** file.
3. Change `hello` function to return a different string, such as "Hello world! 🌎🍎" and save the file.
4. Build your app by clicking **Run** button from top menu bar or press <kbd>⌘ Cmd</kbd> + <kbd>R</kbd>, you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

> **info** **Tip**: Use `npx pod-install` to reinstall the pods if you add new native files to the module or when you modify **expo-module.config.json**.

</Step>

> **Note**: There are also other flows for working on an Expo module in parallel with your application. For example, you can use a monorepo or publish to npm, as described in the [How to use a standalone Expo module](/modules/use-standalone-expo-module-in-your-project) guide.

## Create a new module with an example project

<Step label="1">

### Create the Expo module

To create a new Expo module from scratch, run the `create-expo-module` script as shown below.
The script will ask you a few questions and then generate the native Expo module along with the example app for Android and iOS that uses your new module.

<Terminal cmd={[`$ npx create-expo-module@latest my-module`]} />

</Step>

<Step label="2">

### Open the module and start the development server

Navigate to the module directory and then open the Android and/or iOS example project by running the following commands:

<Terminal cmd={[`$ cd my-module`, `$ npm run open:android`, `$ npm run open:ios`]} />

Go to **example** directory and start the development server in your terminal so that when you edit the native module and build the app in the next step, the changes will be reflected in the app:

<Terminal cmd={['$ cd example', '$ npx expo start']} cmdCopy="cd example && npx expo start" />

> **Note:** If you're using Windows, you can open the example project by opening the **android** directory in Android Studio, but you cannot open the iOS project files.

</Step>

<Step label="3">

### Edit the module

#### Android

1. Open **my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt** file.
2. Change `hello` function to return a different string, such as "Hello world! 🌎🤖" and save the file.
3. Build the app by clicking **Run 'app'** button from top menu bar and you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

#### iOS

1. Under **Pods** > **Development Pods** > **MyModule**, open **MyModule.swift** file.
2. Change `hello` function to return a different string, such as "Hello world! 🌎🍎" and save the file.
3. Build your app by clicking **Run** button from top menu bar or press <kbd>⌘ Cmd</kbd> + <kbd>R</kbd>, you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

> **info** **Tip**: Use `npx pod-install` to reinstall the pods if you add new native files to the module or when you modify **expo-module.config.json**.

</Step>
## Next steps

Now that you have learned how to initialize a module and make simple changes to it, you can continue to a tutorial or dive right into the API reference.

<BoxLink
  title="Tutorial: Creating a native module"
  description="A tutorial on creating a native module that persists settings with Expo Modules API."
  href="/modules/native-module-tutorial/"
  Icon={Grid01Icon}
/>

<BoxLink
  title="Expo Modules API Reference"
  description="A reference to create native modules using Swift and Kotlin."
  href="/modules/module-api/"
  Icon={Grid01Icon}
/>
